<template>
  <div id="container">
    <!--    <button @click="moveCamera">移动相机</button>
        <button @click="moveCube">移动物体</button>-->
  </div>
</template>
<script setup>
import * as THREE from 'three';
import {OrbitControls} from "three/addons/controls/OrbitControls.js";
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
import dat from 'dat.gui'
//创建场景（需要渲染哪些物体在场景中）
const scene = new THREE.Scene();
//添加背景颜色
scene.background = new THREE.Color(0x666666);
//   添加背景图片
// scene.background = new THREE.CubeTextureLoader().setPath("/").load(["tongtai.jpg", "tongtai.jpg", "tongtai.jpg", "tongtai.jpg", "tongtai.jpg", "tongtai.jpg"])

// 添加雾
// scene.fog = new THREE.Fog(0xcccccc, 1, 1000);

//创建相机 （看到场景里的内容 必须在摄像机内）
const camera = new THREE.PerspectiveCamera();
camera.position.z = 5;
camera.position.y = 40;
camera.position.x = 40;
// 创建文理
const texture = new THREE.TextureLoader().load("textures/02-map.jpg");

// 创建背景纹理
const cubeTexture = new THREE.CubeTextureLoader().setPath("./textures/").load(["04.jpg", "tongtai.jpg", "05.jpg", "02.jpg", "06.jpg", "03.jpg"])
// scene.background=cubeTexture

//创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
  // color: 0x00ff00
  // 物体贴纸
  map: texture
});

// 创建一个球体
const sphere = new THREE.SphereGeometry(1);
const material2 = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  // 环境贴纸
  envMap: cubeTexture
});

// 添加三维向量
const vector = new THREE.Vector3(0, 0, 0);
console.log("打印vector",vector)

// 创建网格（通过网格控制立方体的位置）
const cube = new THREE.Mesh(geometry, material);
console.log("cube",cube)
cube.position.set(0, 3, 0)
scene.add(cube);

// 加载gltf实例
// const loader = new GLTFLoader();
// loader.load('./moxing.glb', function (gltf) {
//   console.log("获取glb", gltf)
//   scene.add(gltf.scene);
// })
//
// // 添加环境光
// const light = new THREE.AmbientLight(0x404040, 10  );
// scene.add(light)

// 添加平行光
// const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
// directionalLight.position.set(11.2, 11.2, 7.4)
// scene.add(directionalLight)

//创建一个渲染器
const renderer = new THREE.WebGLRenderer()
// 调整渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.render(scene, camera);

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 对控制器轨道改变时监听
// controls.addEventListener('change', () => {
//   console.log("触发改变")
// })
controls.enableDamping = true;
//阻尼
controls.dampingFactor = 0.2;
// 自动旋转
controls.autoRotate = true;
controls.autoRotateSpeed = 0.5;

// 添加坐标轴
const axesHelper = new THREE.AxesHelper(5);
axesHelper.position.set(0, 3, 0)
scene.add(axesHelper);

//  添加网格地面
// const GridHelper = new THREE.GridHelper(10, 10);
// scene.add(GridHelper)

// 初始化相机
const initCamera=()=>{
  // 相机夹角
  const fov=15
  // 物体宽度
  const distance=  window.innerWidth/2/Math.tan( Math.PI / 12)

}


// 让立方体动起来
function animate() {
  // 传入回到函数
  requestAnimationFrame(animate);
  // cube.rotation.x += controData.rotationSpeed;
  // cube.rotation.y += controData.rotationSpeed;
  // cube.material.color = new THREE.Color(controData.color)
  // material.wireframe = controData.wireframe;
  // 轨道控制器更新 (移动相机)
  controls.update()
  renderer.render(scene, camera);
}

const moveCamera = () => {
  camera.position.y = 15;
  camera.position.z = 10;
  camera.lookAt(0, 3, 0);
}

// 移动物体
const moveCube = () => {
  cube.position.set(3, 5, 0)
  // 相机动态看向物体位置
  camera.lookAt(cube.position)
}

// 创建控制对象
const controData = {
  rotationSpeed: 0.05,
  wireframe: false,
  color: '#ff0000',
  envMap: "无"
}

// 实例gui
// const gui = new dat.GUI()
// const f = gui.addFolder("配置")

onMounted(() => {
  // f.add(controData, 'rotationSpeed', 0, 0.1)
  // f.addColor(controData, "color")
  // f.add(controData, 'envMap', ["无", "day", "night", "sunset"])
  // f.add(controData, 'wireframe')
  // f.open()
  // f.domElement.id = "gui"
  nextTick(() => {
    // 页面中添加一个渲染器 canvas在渲染器中
    // document.querySelector("#container").appendChild(f.domElement);
    document.querySelector("#container").appendChild(renderer.domElement);

  })
  animate()
})

</script>

<style>
#gui {
  position: absolute;
  right: 0;
  width: 300px;
}
</style>
